<template>
  <div class="page community-map-page">
    <div class="community-map" :style="{ height: mapHeight }">
      <DugisMap ref="map" @currentLocation="saveCurrentLocation" />
    </div>
    <div class="community-dk">
      <div class="dk-desc">请先打卡，然后开始本小区任务</div>
      <div class="dk-btn" @click="dk">打卡</div>
      <div class="dk-address">当前地址：{{ currentAddress }}</div>
    </div>
  </div>
</template>

<script>
import { communityDk } from '@/api/publicline/kdcs'
import DugisMap from '@/views/components/DugisMapKDCS'
import { geometry, regeocoderAddress } from '@/utils/geo'
import { Toast } from 'vant';

export default {
  components: {
    "DugisMap": DugisMap
  },
  props: {
    communityInfo: Object
  },
  watch: {
    communityInfo: function( newVal, oldVal ) {
      if ( newVal == oldVal ) return;
      this.drawMap();
    }
  },
  data() {
    return {
      currentLocation: "",
      currentAddress: "",
      mapHeight: "",
    }
  },
  created() {
    const { communityId, ifBdggz, ifSwly } = this.$route.query;
    this.communityId = communityId;
    this.ifBdggz = ifBdggz
    this.ifSwly = ifSwly
  },
  mounted() {
    const headerHeight = document.getElementsByClassName("community-info")[0].clientHeight;
    console.log('---', innerHeight, headerHeight);
    this.mapHeight = innerHeight - headerHeight - 90 + "px";
  },
  methods: {
    drawMap() {
      const wl = this.communityInfo.xqwl;
      console.log(wl);
      const center = this.communityInfo.centerPoint.split(',');
      this.$refs.map.draw( center, wl )
    },
    saveCurrentLocation( lnglat ) {
      this.currentLocation = lnglat;
      console.log(this.currentLocation);
      regeocoderAddress( lnglat, (address) => {
        this.currentAddress = address;
      }, () => {
        Toast.fail('定位地址查询失败');
      } )
    },
    dk() {
      const center = this.currentLocation;
      let xqwl = [];
      for ( const item of this.communityInfo.xqwl ) {
        xqwl.push( item.join(',') );
      }
      xqwl = xqwl.join(';');
      // geometry(xqwl, center, 'contains', (flag) => {
      //   if ( flag ) {
      //     this.submitDk();
      //   } else {
      //     Toast.fail('未到达小区范围，不允许打卡');
      //   }
      // });

      geometry(xqwl, center, 'distance', (distance) => {
        if ( distance < 100 ) {
          this.submitDk();
        } else {
          Toast.fail('未到达小区范围，不允许打卡');
        }
      });
    },
    submitDk() {
      const params = {
        "VILLAGE_ID": this.communityId,
        "ADDRESS": this.currentAddress,
        "LOCATION": this.currentLocation,
      };
      communityDk( params )
      .then( res => {
        if ( res.success ) {
          Toast.success('打卡成功');
          // 打卡成功
          this.$router.replace( {
            path: '/publicline/kdcs/community-page',
            query: {
              communityId: this.communityId,
              ifBdggz: this.ifBdggz,
              ifSwly: this.ifSwly
            },
          } )
        } else {
          // 打卡失败
          Toast.fail('打卡失败');
        }
      } )
    },
  }
}
</script>

<style lang="less" scoped>
.page {
  background: #FFF;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 167px);
}
.community-map {
  flex: 1;
  padding-bottom: 90px;
}
.community-dk {
  border-top: 1px solid #999;
  padding: 4px 0 8px;
  text-align: center;
  bottom: 0;
  width: 100%;
  position: fixed;
  background-color: #fff;

  .dk-btn {
    width: 70%;
    background: #409eff;
    color: #FFF;
    border-radius: 6px;
    text-align: center;
    padding: 6px;
    display: inline-block;
  }
  .dk-desc {
    font-size: 13px;
    margin-top: 4px;
    color: #F00;
    margin-bottom: 6px;
  }
  .dk-address {
    font-size: 12px;
    margin-top: 4px;
  }
}
</style>